<script setup>
import { ref } from 'vue'
import useStore from '../store'
const { todos } = useStore()

// 用户输入的内容 这个数据并不是所有组件要用, 放组件内部即可
const todoName = ref('')

// 代码是思路的外化 体现
const handleEnter = () => {
  if (todoName.value.trim() === '') return
  todos.addTodo(todoName.value)
  todoName.value = ''
}
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input
      v-model="todoName"
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
      @keyup.enter="handleEnter"
    />
  </header>
</template>

<style lang="less" scoped></style>
